<!-- 地下空间内涝模拟 -->
<template>
    <SideBar>
        <template #left>
            <div v-if="showSideBar" class="flood_lt">
                <Headline>人车危险态势</Headline>
                <div class="flood_lt_echarts">
                    <CircleEcharts3D :seriesData="carSeriesData"></CircleEcharts3D>
                </div>
            </div>
            <div v-if="showSideBar" class="flood_lb">
                <Headline>内涝情况</Headline>
                <SmallTitle tips="洪涝灾害下的洪水平均流动速度">洪水流动速度</SmallTitle>
                <div class="flood_lb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="m/s" :seriesData="speedSeriesData" tipLabel="流动速度"
                        areaColorFrom="rgba(65, 179, 255, 0.9)" areaColorTo="rgba(65, 179, 255, 0)"></LineEcharts>
                </div>
                <SmallTitle tips="每百平方米的地表径流范围">每百平方米地表径流比例</SmallTitle>
                <div class="flood_lb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="%" :seriesData="rangeSeriesData" tipLabel="径流比例"
                        areaColorFrom="rgba(26, 238, 162, 0.9)" areaColorTo="rgba(65, 179, 255, 0)"></LineEcharts>
                </div>
                <SmallTitle tips="每百平方米的地表径流范围">地表径流速度</SmallTitle>
                <div class="flood_lb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="m/s" :seriesData="runoffSpeedSeriesData" tipLabel="径流速度"
                        areaColorFrom="rgba(206, 206, 64, 0.9)" areaColorTo="rgba(245, 255, 65, 0)"></LineEcharts>
                </div>
            </div>
        </template>
        <template #right>
            <div v-if="showSideBar" class="flood_rt">
                <Headline>各状态指数</Headline>
                <SmallTitle tips="每百平方米的地表径流范围">平均每小时降雨量</SmallTitle>
                <div class="flood_rt_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="mm/h" :seriesData="weatherIndexData" tipLabel="降雨量"
                        areaColorFrom="rgba(65, 179, 255, 0.9)"></LineEcharts>
                </div>
                <SmallTitle tips="内涝场景下的车库各个区域平局积水高度">车库平均积水高度</SmallTitle>
                <div class="flood_rt_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="m" :seriesData="waterLevelData" tipLabel="积水高度"
                        areaColorFrom="rgba(83, 230, 177, 0.9)" :fixed="2"></LineEcharts>
                </div>
                <SmallTitle tips="内涝场景下车辆从启动到逃生的平均时间">车辆平均逃生时间</SmallTitle>
                <div class="flood_rt_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="秒" :seriesData="escapeTimeData" tipLabel="逃生时间"
                        areaColorFrom="rgba(83, 230, 177, 0.9)"></LineEcharts>
                </div>
            </div>
            <div v-if="showSideBar" class="flood_rb">
                <Headline>灾害损失情况</Headline>
                <SmallTitle tips="内涝场景下各楼栋人口伤亡统计">人口伤亡</SmallTitle>
                <div class="flood_rb_echarts">
                    <CubeBarEcharts :seriesData="deathSeriesData" :xAxisData="casualtyXAxisData"
                        :shapeColor="shapeColor2" :currentStep="currentStep" :fixed="0">
                    </CubeBarEcharts>
                </div>
                <SmallTitle tips="内涝场景下各楼栋车辆损毁统计">车辆损毁情况</SmallTitle>
                <div class="flood_rb_echarts">
                    <CubeBarEcharts :seriesData="lossCarSeriesData" :xAxisData="casualtyXAxisData"
                        :shapeColor="shapeColor3" unit="辆" :currentStep="currentStep" :fixed="0">
                    </CubeBarEcharts>
                </div>
            </div>
        </template>
    </SideBar>

    <div class="option_setting">
        <!-- <UButton @click="openDialog">模拟配置</UButton>
        <UButton v-if="hasSetOptions" @click="startSimulate">开始模拟</UButton> -->

        <ConfigBtn :status="showSQ" @click="openDialog"></ConfigBtn>
        <Start v-if="hasSetOptions" @click="startSimulate">开始模拟</Start>
    </div>
    <UDialog v-model:visible="dialogVisible" title="模拟配置" @confirm="confirmHandle" @close="closeHandle"
        @cancel="closeHandle">
        <div class="form_item">
            <div class="label">暴雨等级：</div>
            <UCheckbox v-model="rainLevel" :options="rainLevelOptions" single></UCheckbox>
        </div>
        <div class="form_item">
            <div class="label">排水措施：</div>
            <UCheckbox v-model="deviceInfo" :options="waterOptions" single></UCheckbox>
        </div>
    </UDialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, onUnmounted, computed } from 'vue';
import { useStore } from '@/stores';
import { setIntervalExc } from "@/utils/index";
const { proxy } = getCurrentInstance();
const store = useStore();
import { getWaterStat } from "@/api/flood";
const bus = proxy.$bus;
const showSideBar = computed(() => store.showSidebar)
const showSQ = ref(false);

const isPlaying = ref(false);
const dialogVisible = ref(false);
const hasSetOptions = ref(false);
const currentStep = ref(0);

const deviceInfo = ref("");
const rainLevel = ref("");
const waterOptions = ref([
    { label: '水泵部署', value: 'waterpump_alarm' },
    { label: '沙袋部署', value: 'sandbag' },
    { label: '水位部署', value: 'waterline_alarm' }
]);
const rainLevelOptions = ref([
    { label: '一级', value: '1' },
    { label: '二级', value: '2' },
    { label: '三级', value: '3' },
]);
const carSeriesData = ref([]);//人车危险态势数据
const speedSeriesData = ref([]);//洪水流动速度数据
const rangeSeriesData = ref([]);//地表径流范围数据
const runoffSpeedSeriesData = ref([]);//地表径流速度
const weatherIndexData = ref([]);//暴雨天气指数
const waterLevelData = ref([]);//车库积水指数
const lossSeriesData = ref([]);//财产损失
const deathSeriesData = ref([]);//人口伤亡
const lossCarSeriesData = ref([]);//车辆损毁
const escapeTimeData = ref([]);//车辆平均逃生时间

const xAxisData = ref([]);//内涝情况,各状态指数X轴数据
const casualtyXAxisData = ref([]);//损失情况X轴数据

const shapeColor2 = {
    left: ['rgba(41, 241, 250, 0.5)', 'rgba(27, 126, 242, 0)'],
    right: ['#29F1FA', 'rgba(27, 126, 242, 1)'],
    top: ['#29F1FA', '#29F1FA'],
}
const shapeColor3 = {
    left: ['rgba(200, 201, 64, 0.5)', 'rgba(242, 199, 27, 0)'],
    right: ['#C8C940', 'rgba(242, 199, 27, 0)'],
    top: ['#C8C840', '#C8C840'],
}
onMounted(() => {
    bus.on("floodPlaying", args => {
        floodPlaying(args);
        isPlaying.value = true;
    });
    bus.on("stopPlaying", () => {
        isPlaying.value = false;
    });
})
onUnmounted(() => {
    bus.off('floodPlaying');
});
/**
 * 打开模拟配置弹窗
 */
function openDialog() {
    if (isPlaying.value) {
        proxy.$toast("模拟进行中");
        return;
    }
    dialogVisible.value = true;
    showSQ.value = true;
    bus.emit("keyboardInput", true);
}
function confirmHandle() {
    if (!deviceInfo.value) {
        proxy.toast("请选择排水措施！")
        return;
    }
    if (!rainLevel.value) {
        proxy.toast("请选择暴雨等级！")
        return;
    }
    bus.emit("putFloodDevice", deviceInfo.value);
    bus.emit("setRainLevel", rainLevel.value);
    showSQ.value = false;
    setTimeout(() => {
        dialogVisible.value = false;
        hasSetOptions.value = true;
    }, 500);
}
function closeHandle() {
    showSQ.value = false;
}
/**
 * 开始模拟
 */
function startSimulate() {
    bus.emit('startSimulation');
    hasSetOptions.value = false;
    deviceInfo.value = '';
    rainLevel.value = '';
    store.setShowSidebar(true);
}
const floodPlaying = async (args) => {
    if (!showSideBar.value) {
        store.setShowSidebar(true);
        store.setShowToolbar(false);
    }
    await getWaterStatData(args);
    if (args.step == 0) {
        escapeTimeData.value = [];
    }
    if (args.step == args.totalSteps - 1) {
        isPlaying.value = false;
    } else {
        isPlaying.value = true;
    }
}
const getWaterStatData = (args) => {
    currentStep.value = args['step'];
    const simParam = {
        begin: args['step'] - 1,
        end: args['step'],
        interval: 1,
        num_points: args['step'],
        point_interval: 1,
    }
    const tablename = args['id'];
    // const tablename = "water_level1";
    setIntervalExc(args, () => {
        getWaterStat(tablename, simParam).then(res => {
            if (res && res.length > 0) {
                const value = res[0];
                const step = value['step'];
                const water_info = value['water_info'];
                const crowd_info = value['crowd_info'];

                //人车危险态势
                const regional_distribution = crowd_info['regional_distribution'];
                getCarSeriesData(regional_distribution);
                // 洪水流动速度
                const flow_speed = water_info['flow_speed'];
                speedSeriesData.value = flow_speed;
                // 地表径流范围
                const runoff_range = water_info['runoff_range'];
                rangeSeriesData.value = runoff_range;
                // 地表径流速度
                const runoff_speed = water_info['runoff_speed'];
                runoffSpeedSeriesData.value = runoff_speed;
                // 暴雨天气指数
                const weather_index = water_info['weather_index'];
                weatherIndexData.value = weather_index;
                // 车库积水指数
                const water_level = water_info['water_level'];
                waterLevelData.value = water_level;
                // 财产损失
                const property_damage = crowd_info['property_damage'];
                lossSeriesData.value = property_damage;
                // 人口伤亡
                const casualties = crowd_info['casualties'];
                deathSeriesData.value = casualties;
                // 车辆损毁
                const car_damage = crowd_info['car_damage'];
                lossCarSeriesData.value = car_damage;
                //内涝情况,各状态指数X轴数据
                let xAxisArr = [];
                for (let index = 0; index < flow_speed.length; index++) {
                    xAxisArr.push(index + step);
                }
                xAxisData.value = xAxisArr;
                // 损失情况X轴数据
                let lossXArr = [];
                for (let index = 0; index < property_damage.length; index++) {
                    lossXArr.push((index + 1) + '栋');
                }
                casualtyXAxisData.value = lossXArr;
                //车辆平均逃生时间
                const escape_time = crowd_info['avg_escape_time'];
                let escapeTimeArr = escapeTimeData.value;
                if (escape_time.length == 1) {
                    escapeTimeArr.push(escape_time[0]);
                } else {
                    escapeTimeArr.push(escape_time[1]);
                }
                escapeTimeData.value = escapeTimeArr;
            }
        })
    });
}
/**
 * 获取人车危险态势数据
 */
const carNames = ["00:00-06:00", "06:00-12:00", "12:00-18:00", "18:00-24:00"];
const carColors = ['rgba(73, 195, 132, 1)', 'rgba(156, 85, 54, 1)', 'rgba(9, 104, 208, 1)', 'rgba(221, 210, 70, 1)'];
const getCarSeriesData = (datas) => {
    let tempArr = [];
    for (let index = 0; index < datas.length; index++) {
        tempArr.push({
            name: carNames[index],
            value: datas[index],
            color: carColors[index]
        })
    }
    carSeriesData.value = tempArr;
}
</script>


<style scoped lang="scss">
/* 左上角图表样式 */
.flood_lt {
    height: 29.5%;
    width: 100%;

    .flood_lt_echarts {
        width: 100%;
        height: 82%;
    }
}

/* 左下角图表容器样式 */
.flood_lb {
    height: 70%;
    display: flex;
    flex-direction: column;

    .flood_lb_echarts {
        width: 100%;
        flex: 1;
    }
}

/* 左下角图表样式 */


/* 右上角图表样式 */
.flood_rt {
    height: 60%;
    display: flex;
    flex-direction: column;

    .flood_rt_echarts {
        width: 100%;
        flex: 1;
    }
}

/* 右下角图表样式 */
.flood_rb {
    height: 40%;
    display: flex;
    flex-direction: column;

    .flood_rb_echarts {
        width: 100%;
        flex: 1;
    }
}
</style>
